<template>
	<view class="tabbar-box">
		<view class="left-right-bg"></view>
        <view class="tabbar">
        	<view class="left">
        		<view class="item" @tap="handleClick('main')">
					<view class="text" :style="`--text: '首页'; --icon: url(${ active == 'main' ? base_url+'/static/main-enable.jpg' : base_url+'/static/main.jpg' })`"></view>
				</view>
        		<view class="item" @tap="handleClick('activity')">
					<view class="text" :style="`--text: '活动'; --icon: url(${ active == 'activity' ? base_url+'/static/activity-enable.jpg' : base_url+'/static/activity.jpg' })`"></view>
				</view>
        	</view>
			<view class="center"></view>
			<view class="right">
				<view class="item" @tap="handleClick('message')">
					<view class="text" :style="`--text: '消息'; --icon: url(${ active == 'message' ? base_url+'/static/message-enable.jpg' : base_url+'/static/message.jpg' })`"></view>
				</view>
				<view class="item" @tap="handleClick('home')">
					<view class="text" :style="`--text: '我的'; --icon: url(${ active == 'home' ? base_url+'/static/home-enable.jpg' : base_url+'/static/home.jpg' })`"></view>
				</view>
			</view>
        </view>
		<view class="center-item" @click="handleClick('treeHole')">
			<view class="icon" :style="`--icon: url(${ base_url+'/static/tree_logo.png' })`"></view>
		</view>
    </view>
</template>

<script setup>
import { base_url } from '../../api/config';
import { ref } from 'vue';
// import { defineProps, defineEmits } from 'vue';

const props = defineProps({
    active: String
});

const emit = defineEmits(['switch-tabbar']);

const handleClick = (s) => {
    // 触发自定义事件，并传递数据
	console.log('组件内点击事件', s);
	if (s == props.active) return ;
    emit('switch-tabbar', { active: s });
};

</script>

<style lang="less">
.tabbar {
	width: 100%;
	height: 20vw;
	background-color: rgb(51, 51, 51);
	position: fixed;
	bottom: 0;
	mask: radial-gradient(circle at 50% 0%, transparent 22%, black 22%);
	// mask-mode: alpha; /* 使用 alpha 通道作为蒙版 */
	// mask-repeat: no-repeat;
	// mask-position: center;
	// mask-size: 100% 100%;
	// mask-clip: content-box; /* 蒙版仅应用于内容区域 */
	display: flex;
	
	.left, .right {
		flex: 1;
		position: relative;
		display: flex;
	}
	
	.center {
		width: 23.656%;
	}
}

.center-item {
	--size: 21vw;
	width: var(--size);
	height: var(--size);
	border-radius: 50%;
	background-color: rgb(51, 51, 51);
	position: fixed;
	left: 50%;
	bottom: 9.5vw;
	transform: translateX(-50%);

	.icon {
		--size: 100%;
		--icon-size: 70%;
		width: var(--size);
		height: var(--size);
		background-image: var(--icon);
		background-size: var(--icon-size);
		background-position: center;
		background-repeat: no-repeat;
	}
}

.left-right-bg {
	width: 100%;
	height: 20vw;
	position: fixed;
	bottom: 0;

	&::before, &::after {
		--border-radius: 4.444vmin;
		content: "";
		width: calc((100% - 23.656%) / 2);
		height: 100%;
		background-color: rgb(51, 51, 51);
		position: absolute;
		top: -22.22%;
	}
	
	&::before {
		left: 0;
		border-radius: 0 var(--border-radius) 0 0;
	}
	
	&::after {
		right: 0;
		border-radius: var(--border-radius) 0 0 0;
	}
}

.item {
	flex: 1;

	.text {
		width: 100%;
		height: 100%;
		background-image: var(--icon);
		background-size: 50%;
		background-repeat: no-repeat;
		background-position: top;
		position: relative;

		&::after {
			content: var(--text);
            display: block;
			color: #fff;
			position: absolute;
			left: 50%;
			bottom: 3.5vw;
			transform: translateX(-50%);
			font-size: 2.5vw;
		}
	}
}

</style>




